function dump(obj)
{
	s = '';
	for(key in obj)
	{
		s += key+': '+obj[key]+'\n';
	}
	return(s);
}

function StrObject(obj)
{
	for(key in obj)
	{
		this[key] = obj[key];
	}

	if(!this.texture)
	{
		this.texture = 'notexture.png';
	}
	if(!this.resStates)
	{
		this.resStates = {};
	}
	if(!this.animations)
	{
		this.animations = {};
	}
}

this.reinit = function()
{
	this.properties.update(this.object);
}

function init(){

this.canvas = $('#canvas');
this.properties = new propElement($('#properties'));

//properties.update();

var timeouts = {};

this.object = new StrObject({});

var obj = this;

hash = window.location.hash.replace(/^#/,'');
if(hash)
{
	loadObject(hash);
}
else
{
	this.reinit();
}

$('.icon.has-popup')
	.click(function(){
		if($('#'+this.id+'-popup').css('display') != 'none')
		{
			return;
		}
		$('#'+this.id+'-popup').fadeIn(150);
		$('#'+this.id+'-popup').children('script').each(function(){
			eval(this.innerHTML);
			if(onShow)
			{
				onShow();
			}
		});
	})
	.mouseenter(function(){
		if(timeouts[this.id])
		{
			window.clearTimeout(timeouts[this.id]);
		}
	})
	.mouseleave(function(){
		var id = this.id;
		timeouts[this.id] = window.setTimeout(function(){
			$('#'+id+'-popup').fadeOut(150);
		}, 750);
	})
;

canvas.drawRect({
	fillStyle: "green",
	x: 100, y: 50,
	width: 20, height: 30,
	strokeWidth: 0
});

loadObject = function(hash)
{
	$.ajax(
		{
			url: hash,
			dataType: 'json',
			complete: function(data){
				if(data.status == 200)
				{
					var json = JSON.parse(data.responseText);
					obj.object = new StrObject(json);
					obj.reinit();
//					window.setTimeout(function(){
//						alert(obj.properties.getData());
//					}, 100);
				}
				else
				{
					alert('Request failed, response code: '+data.status);
				}
			}
		}
	);
}

saveObject = function()
{
	alert(this.properties.getData());
}

}

function propElement(el)
{
	this.element = el;

	this.update = function(object)
	{
		this.element.empty();

		this.element.append(this.populate('properties', object));
	}

	this.populate = function(baseKey, object, level)
	{
		if(!level) level = 0;
//		propNode = $('<div />').addClass('property').addClass('head');
//		keyNode = $('<div />').addClass('key').html('Key');
//		valueNode = $('<div />').addClass('value').html('Value');
//		propNode.append(keyNode, valueNode)
//		this.element.append(propNode);

		var elements = [];

/*			if(object[key] instanceof Object)
			{
				propNode = $('<div />').addClass('property').addClass('expandable');
				keyNode = $('<div />').addClass('key').html(key);
				childsNode = $('<div />').addClass('childs');
				valueNode = $('<div />').addClass('value').html('[...]').click(function(){
//					$().slideToggle(childsNode);
				});
				childElements = this.populate(object[key], true);
				for(key in childElements)
				{
//					childsNode.append(childElements[key]);
				}
				propNode.append(keyNode, valueNode)
//				propNode.append(childsNode);
				this.element.append(propNode);
			}
			else
			{
				propNode = $('<div />').addClass('property');
				keyNode = $('<div />').addClass('key').html(key);
				valueNode = $('<div />').addClass('value');
				valueInputNode = $('<input />').attr('type', 'text').addClass('value-input').attr('value', object[key]);
				valueNode.append(valueInputNode);
				propNode.append(keyNode, valueNode);
				elements.push(propNode);
			}*/
		if(object instanceof Object)
		{
			var holder = $('<div />').addClass('holder').addClass('level-'+level);
			var keyNode = $('<div />').addClass('key').html(baseKey);
			var valueNode = $('<div />').addClass('value').html('[...]');
			var optionsNode = $('<div />').addClass('options');
			var childsNode = $('<div />').addClass('childs');
			var addButtonNode = $('<div />').addClass('add').click(function(e){
				name = prompt('Enter property name:');
				if(name)
				{
					var newPropNode = $('<div />').addClass('property').addClass('level-'+(level+1));
					var newKeyNode = $('<div />').addClass('key').html(name);
					var newValueNode = $('<div />').addClass('value');
					var newValueInputNode = $('<input />').attr('type', 'text').addClass('value-input').val('<no value>');
					var newOptionsNode = $('<div />').addClass('options');
					var newDeleteButtonNode = $('<div />').addClass('delete').click(function(){
						if(confirm('Really delete property `'+newKeyNode.html()+'` with value `'+newValueInputNode.val()+'`?'))
						{
							newPropNode.remove();
						}
					});
					newValueNode.append(newValueInputNode);
					newOptionsNode.append(newDeleteButtonNode);
					newPropNode.append(newKeyNode, newValueNode, newOptionsNode);
					childsNode.append(newPropNode);
				}
				e.stopPropagation();
			});
			optionsNode.append(addButtonNode);
			var propNode = $('<div />').addClass('property').addClass('collapsable').click(function(){
				if($(this).hasClass('expandable'))
				{
					$(this).removeClass('expandable');
					$(this).addClass('collapsable');
				}
				else
				{
					$(this).removeClass('collapsable');
					$(this).addClass('expandable');
				}
				childsNode.slideToggle(250);
			});

			for(key in object)
			{
				childsNode.append(this.populate(key, object[key], level+1));
			}

//			childsNode = childsNode[0];
//			alert(childsNode.innerHTML);

			propNode.append(keyNode, valueNode, optionsNode);
			holder.append(propNode, childsNode);

			return holder;
		}
		else
		{
			var propNode = $('<div />').addClass('property').addClass('level-'+level);
			var keyNode = $('<div />').addClass('key').html(baseKey);
			var valueNode = $('<div />').addClass('value');
			var valueInputNode = $('<input />').attr('type', 'text').addClass('value-input').val(object);
			var optionsNode = $('<div />').addClass('options');
			var deleteButtonNode = $('<div />').addClass('delete').click(function(){
				if(confirm('Really delete property `'+keyNode.html()+'` with value `'+valueInputNode.val()+'`?'))
				{
					propNode.remove();
				}
			});
			valueNode.append(valueInputNode);
			optionsNode.append(deleteButtonNode);
			propNode.append(keyNode, valueNode, optionsNode);
			return propNode;
		}

/*		if(doReturn)
		{
			return elements;
		}
		else
		{
			for(key in elements)
			{
				this.element.append(elements[key]);
			}
		}*/
	}

	this.getData = function(parent)
	{
		if(!parent)
		{
//			childs = this.element.children('.holder').each(function(){
//				
//			});
//			return dump(childs);
			base = this.element.children().first().children('.childs');
			obj = this.getData(base);
			return JSON.stringify(obj);
		}
		else
		{
			var obj = {};
			alert(parent.html());
			params = $(parent).children('.property').each(function(){
				alert('val: '+$(this).children('.value').children('value-input').val());//.val());
			});
			trees = $(parent).children('.holder');
/*			for(key in params)
			{
				obj[key] = params[key];
			}
			for(key in trees)
			{
				params[key] = this.getData(trees[key]);
			}
			return obj;*/
		}
	}
}
